document.querySelector('.menu-top-container').innerHTML =
  `
<div id="p-container" class="w-full h-50">
    <img class="w-20 h-20" id="p-img" src='/images/code.png'/>
    <p id="in-pip-message" style="display: none">in-pip-message</p>
</div>
    <button onclick="openDocumentPictureInPicture()">切换</button>
  `
const container = document.querySelector('#p-container')
const img = document.querySelector('#p-img')
const inPipMessage = document.querySelector('#in-pip-message')

async function openDocumentPictureInPicture () {
  if (window.documentPictureInPicture.window) {
    window.documentPictureInPicture.window.close()
    inPipMessage.style.display = 'none'
    container.appendChild(img)
    return
  }
  const pipWindow = await window.documentPictureInPicture.requestWindow({
    width: img.clientWidth,
    height: img.clientHeight + 50,
  })
  // Copy style sheets over from the initial document
  // so that the player looks the same.
  Array.from(document.styleSheets).forEach((styleSheet) => {
    try {
      const cssRules = [...styleSheet.cssRules]
        .map((rule) => rule.cssText)
        .join('')
      const style = document.createElement('style')

      style.textContent = cssRules
      pipWindow.document.head.appendChild(style)
    } catch (e) {
      const link = document.createElement('link')

      link.rel = 'stylesheet'
      link.type = styleSheet.type
      link.media = styleSheet.media
      link.href = styleSheet.href
      pipWindow.document.head.appendChild(link)
    }
  })
  pipWindow.document.body.appendChild(img)
  inPipMessage.style.display = 'block'

  pipWindow.addEventListener('pagehide', (event) => {
    inPipMessage.style.display = 'none'
    container.append(img)
  })
}